<template>
    <a-form :model="form" :rules="rules"
        :label-col="{ style: { width: props.labelWidth ? props.labelWidth : '100px', textAlign: 'right' } }"
        ref="formRef" :wrapper-col="{ span: 14 }">
        <div v-for="(item, index) in props.formList" :key="index">

            <a-form-item :label="item.component=='checkbox'?'' : item.label" :name="item.name"  v-if="item.show !== false" :class="[item.component=='textarea'?'aaarea':'']">
                <div class="item">
                    <template v-if="item.component == 'input'">
                        <a-input v-model:value="item.value" :disabled="item.disabled"
                            :placeholder="getPlaceholer(item)" />
                    </template>
                    <template v-if="item.component == 'datePicker'">
                        <a-date-picker :date-format="item.format ? item.format : 'YYYY年MM月DD日'"
                            :format="item.format ? item.format : 'YYYY年MM月DD日'"
                            :value-format="item.format ? item.format : 'YYYY年MM月DD日'" style="width: 100%;"
                            :disabled="item.disabled" v-model:value="item.value" :placeholder="getPlaceholer(item)"
                            :show-time="item.showTime ? { format: 'HH:mm', minuteStep: item.minuteStep?item.minuteStep:1 } : false" />
                    </template>
                    <template v-if="item.component == 'dateRange'">
                        <a-range-picker :date-format="item.format ? item.format : 'YYYY年MM月DD日'" format='YYYY年MM月DD日'
                            value-format='YYYY年MM月DD日' v-model:value="item.value" style="width: 100%;"
                            :disabled="item.disabled" :placeholder="['开始时间','结束时间']" />
                    </template>
                    <template v-if="item.component == 'cascader'">
                        <a-cascader v-model:value="item.value" style="width: 100%;" :disabled="item.disabled"
                            :options="item.options" :placeholder="getPlaceholer(item)" />
                    </template>
                    <template v-if="item.component == 'textarea'">
                        <a-textarea style="width: 100%;" v-model:value="item.value" showCount
                            :maxlength="item.maxlength ? item.maxlength : 1000"
                            />
                    </template>
                    <template v-if="item.component == 'select'">
                        <a-select :filter-option="filterOption" show-search v-model:value="item.value" :placeholder="getPlaceholer(item)" :options="item.options">
                        </a-select>
                    </template>
                    <template v-if="item.component == 'radio'">
                        <a-radio-group v-model:value="item.value" name="radioGroup" @change="radioChange(item)">
                            <a-radio :value="el.value" v-for="el in item.options" :key="el.label">{{
                                el.label }}</a-radio>
                        </a-radio-group>
                    </template>
                    <template v-if="item.component == 'checkbox'">
                        <a-checkbox :style="{marginLeft:props.labelWidth ? props.labelWidth : '100px'}" v-model:checked="item.value">{{item.label}}</a-checkbox>
                    </template>
                </div>
            </a-form-item>
            <div v-show="item.tip" class="tip">{{ item.tip }}</div>
        </div>
    </a-form>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue";
import type { IndexFormItem } from "@/views/ApplicationDetails/application-type.ts"
import type { Rule } from 'ant-design-vue/es/form';
const props = defineProps(['formList', 'rules', "labelWidth"]);
const formRef = ref<any>(null)
const form = ref({});
let rules: Record<string, Rule[]> = {
};
watch(() => props.formList, (val) => {
    const ruleMap = {}
    val.forEach((el: IndexFormItem) => {
        const isSelect = el.component == 'select' || el.component == 'cascader' || el.component == 'dateRange' || el.component == 'datePicker';
        const message = isSelect ? '请选择' + el.label : '请填写' + el.label
        ruleMap[el.name] = [{ required: el.required !== false, message, trigger: ['change', 'blur'] }]
        if (el.value && formRef.value) {
          formRef.value.clearValidate([el.name])
        }
        form.value[el.name] = el.value
    })
    rules = ruleMap;
}, { deep: true, immediate: true })

function clear() {
  formRef.value.clearValidate()
}
import { cloneDeep} from 'lodash-es'
const submitForm = async () => {
    const flag = await formRef.value.validate()
    if (!flag) return;
    // formRef.value.resetFields();
    const tempData = cloneDeep(props.formList)
    // const tempData = JSON.parse(JSON.stringify(props.formList))
    // props.formList.forEach(el => el.value = '')
    return tempData
}
const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const getPlaceholer = (item: IndexFormItem): string => {
    if (item.component === 'select' || item.component == 'datePicker' ||item.component == 'cascader') {
        return '请选择' + item.label;
    }
    return '请输入' + item.label;
};
const emits = defineEmits(['radioChange'])
const radioChange = (val) => {
    emits('radioChange', val)
}
defineExpose({ submitForm,clear })
</script>

<style lang="less" scoped>
:deep(.ant-row) {
    display: flex;
}

:deep(.ant-col-14) {
    max-width: unset;
    flex: 1;

}

.item {
    display: flex;
    gap: 8px;
    position: relative;
    margin-bottom: 10px;
}

.tip {
    width: 480px;
    height: 84px;
    font-weight: 400;
    font-size: 14px;
    color: #B3C0C8;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.btn-area {
    display: flex;
    align-items: center;
    width: 470px;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;

}

.error-msg {
    position: absolute;
    color: red;
    font-size: 12px;
    top: 35px;
    left: -100px
}



.aaarea{
    :where(.css-dev-only-do-not-override-pz7vu8).ant-form-item{
        margin-bottom:10px!important;
    }
}
</style>